import React,{Component} from 'react';
import {render} from 'react-dom';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import Button from 'material-ui/Button';
import List from 'material-ui/List';
import Divider from 'material-ui/Divider';
//import { mailFolderListItems, otherMailFolderListItems } from './tileData';
import SimpleList from '../List/SimpleList';
import SimpleBottomNavigation from '../BottomNavigation/SimpleBottomNavigation';
import DrawerContainer from './DrawerContainer';

/*  左侧抽屉盒子，集成各种可选功能按钮。
          */
const styles = {
  list: {
    width: 300,
  },
  fullList: {
    width: 'auto',
  },
};
class LeftDrawer  extends React.Component  {
  constructor(props){
    super(props);
    this.toggleDrawer = this.toggleDrawer.bind(this);
  }

  toggleDrawer(){
    this.props.clickOrClose();
  }

  render() {
    const { classes } = this.props;
    const sideList = (
      <div className={classes.list}>

      </div>
    );

    return (
      <div>
        {/* <Button onClick={this.toggleDrawer}>Open LeftDrawer</Button>  */}

        <Drawer anchor="left" open={this.props.showLeftDrawer} onClose={this.toggleDrawer} >
          <div
            tabIndex={0}
            role="button"
            onClick={this.toggleDrawer}
            onKeyDown={this.toggleDrawer}
          >
             <div className={classes.list}>
                <div>
                  <SimpleList />
                </div>
                <div>
                  <SimpleBottomNavigation />
                </div>
             </div>

          </div>
        </Drawer>
      </div>
    );
  }
}

//export default LeftDrawer;
export default withStyles(styles)(LeftDrawer);

